<script setup lang="ts">
import AppTable from "@/components/app/AppTable.vue";
import { nextTick, ref, watchEffect } from "vue";
import { deleteDictOption, createDictOption, updateDictOption } from "@/api/system/index.ts"
import { alertSuccess, confirm } from "@/utils/alert.ts";
import type { IDictOptionParams } from "@/types";

const props = defineProps<{
  dict: any | null
}>()
const tableRef = ref()
const url = ref<string>('')
const showDialog = ref<boolean>(false)
const params = ref<IDictOptionParams>({
  parentId: null,
  label: '',
  value: '',
  status: '0',
  sort: 0,
  typeId: 0
})


const handleAdd = () => {
  if (params.value.parentId) {
    params.value.parentId = Number(params.value.parentId)
  }
  createDictOption({
    typeId: props.dict.id,
    label: params.value.label,
    value: params.value.value,
    status: params.value.status,
    parentId: params.value.parentId,
    sort: params.value.sort
  }).then(() => {
    alertSuccess('添加成功')
    tableRef.value.queryData()
    params.value = {
      typeId: props.dict.id,
      label: '',
      value: '',
      status: '0',
      sort: 0,
      parentId: null
    }
    showDialog.value = false
  })
}

const handleUpdate = (row: any) => {
  if (row.parentId) {
    row.parentId = parseInt(row.parentId)
  }
  updateDictOption(row.id, {
    typeId: row.typeId,
    label: row.label,
    value: row.value,
    status: row.status,
    parentId: row.parentId,
    sort: row.sort
  }).then(() => {
    tableRef.value.queryData()
    alertSuccess('修改成功')
  })
}

const handleDelete = (id: string) => {
  confirm('确定要删除吗？', async () => {
    await deleteDictOption(id)
    tableRef.value.queryData()
    alertSuccess('删除成功')
  })
}
const addDictOption = () => {
  showDialog.value = true
}
watchEffect(() => {
  if (props.dict) {
    url.value = ''
    nextTick(() => {
      if (props.dict.type === 'list') {
        url.value = `/api/sys/dict/queryListData/${props.dict.id}`
      } else if (props.dict.type === 'tree') {
        url.value = `/api/sys/dict/queryTreeData/${props.dict.id}`
      }
    })
  }
})

</script>

<template>
  <div>
    <AppTable v-if="url" ref="tableRef" :title="props.dict.name" :btn-show="{
      add: false,
      edit: false,
      delete: false,
      export: false,
      import: false,
    }" :pageable="false" api-method="get" :api-path="url" :without-border="false" rowKey="id"
      @multiple-selection="data => { console.log(data) }">
      <template v-slot:actionBar>
        <div style="text-align: right">
          <el-button type="warning" size="small" @click="addDictOption">添加字典项</el-button>
        </div>
      </template>
      <template v-slot:tableColumn>
        <el-table-column prop="id" label="编号" width="100" />
        <el-table-column v-if="props.dict.type === 'tree'" prop="parentId" label="父级编号" width="100">
          <template #default="scope">
            <el-input v-model="scope.row.parentId" />
          </template>
        </el-table-column>
        <el-table-column label="字典名称" align="left">
          <template #default="scope">
            <el-input v-model="scope.row.label" />
          </template>
        </el-table-column>
        <el-table-column label="字典编码" align="left">
          <template #default="scope">
            <el-input v-model="scope.row.value" />
          </template>
        </el-table-column>
        <el-table-column label="排序" width="100" align="center">
          <template #default="scope">
            <el-input type="number" v-model="scope.row.sort" />
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100" align="center">
          <template #default="scope">
            <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" />
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="150">
          <template #default="scope">
            <el-button link type="primary" size="small" icon="Edit" @click="handleUpdate(scope.row)">
              修改
            </el-button>
            <el-button link type="danger" size="small" icon="Delete" @click="handleDelete(scope.row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </template>
    </AppTable>

    <el-dialog v-model="showDialog" align-center title="添加字典项" width="500px" :close-on-click-modal="false">
      <el-form label-width="80px" @submit.prevent="handleAdd">
        <el-form-item label="父级ID" v-if="props.dict.type === 'tree'">
          <el-input type="number" v-model="params.parentId" />
        </el-form-item>
        <el-form-item label="字典名称">
          <el-input v-model="params.label" />
        </el-form-item>
        <el-form-item label="字典编码">
          <el-input v-model="params.value" />
        </el-form-item>
        <el-form-item label="排序">
          <el-input type="number" v-model="params.sort" />
        </el-form-item>
        <el-form-item label="状态">
          <el-switch v-model="params.status" active-value="0" inactive-value="1" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="handleAdd">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped></style>
